<template>
  <div class="box">
   
      <van-nav-bar title="AI" left-text="返回" left-arrow @click-left="onClickLeft" fixed />
    
    <div class="chat">
      <div class="chat-box">
        <div class="message bot-message">Bot: {{ state.answer }}</div>
      </div>
      <div class="chat-bottom">
        <div class="chat-bottom-content">
          <input type="text" class="search" v-model="state.question" placeholder="搜索">
          <button class="button" @click="talk"><van-icon name="guide-o" size="20px" /></button>
        </div>


      </div>
    </div>
  </div>
</template>

<script setup>
import axios from "axios"
import { reactive } from 'vue';

const state = reactive({
  question: '',
  answer: '',
})
const onClickLeft = () => history.back()

const talk = () => {
  axios.post('http://http://106.54.217.98:3000/openai', {
    question: state.question
  }).then(res => {
    // console.log(res.data[0].message.content);
    state.answer = res.data[0].message.content
  })
};


</script>

<style lang="less" scoped>
/* Chat box container styles */
.box {
  position: relative;

  .chat {
    margin-top: 1.4rem !important;
    margin: 0.25rem;
    

    .chat-box {
      width: 100%;
      padding-bottom: 0.1rem;
     

      .message {
        background-color: #f1f1f1;

        padding: 0.25rem;
        margin: 0.075rem;
        border-radius: 1rem;
        margin-bottom: 1.5rem !important;

      }

      // .user-message {
      //   margin-top: 0.5rem;
      //   background-color: #d0eaf5;
      //   text-align: left;
      //   font-size: 0.5rem;
      //   line-height: 1rem;
      //   padding-left: 0.5rem;
      // }

      .bot-message {
        background-color: #f5e1d0;
        text-align: left;
        font-size: 0.5rem;
        line-height: 1rem;
        padding-left: 0.5rem;
        margin-bottom: 1.5rem !important;
      }
    }
    .chat-bottom {
      position: fixed;
      bottom: 0.25rem;
      left: 0.5rem;
      .chat-bottom-content {
        width: 100%;
        .search {
          width: 7.5rem;
          height: 1rem;
          background-color: antiquewhite;
          border-radius: 1rem;
          text-align: left;
          font-size: 0.5rem;
          border: 1px;
          padding-left: 0.5rem;
        }

        .button {
          width: 1rem;
          height: 1rem;
          background-color: antiquewhite;
          border-radius: 1rem;
          border: 1px;
          font-size: 0.4rem;

        }


        // .search{
        //   width: 9rem;
        //   border-radius: 1rem;
        //   text-align: left;
        //   transition: 0.5s;
        //   padding-left: 0.5rem;

        // }
      }


    }
  }
}
</style>
